<template>
  <view>
    <m-top :autoBack="false" :bgChangeByScroll="true" bgColor="transparent" @getHeight="getGlHeight">
      <view class="c333 font32 fw500">大会议程</view>
    </m-top>

    <m-container :top="0" v-if="glTop">
      <u-sticky zIndex="8" :offsetTop="0" :customNavHeight="0">
        <view
          class="pdv40 liner-header"
          :style="{
            'padding-top': glPdt + 'px',
          }"
        >
          <scroll-view class="d-switch font36 c333 fw500" v-if="dateList.length > 0" scroll-x>
            <view class="flex align-center d-switch-box">
              <view
                class="switch-item"
                :style="{
                  width: getWidth + 'px',
                }"
                v-for="(item, index) in dateList"
                :key="index"
                :class="{
                  active: activeTime === index,
                }"
                @click="switchChangeHandler(index)"
              >
                {{ timeFilter(item) }}
              </view>
            </view>
          </scroll-view>

          <view class="">
            <m-tabs :list="tabs" :current="tabIndex" @change="tabChangeHandler"></m-tabs>
          </view>
        </view>
      </u-sticky>

      <view class="mgt30 pdv40">
        <template v-if="list.length > 0">
          <panel-process :options="list" @reserve="reserveHandler"></panel-process>
        </template>
        <view v-else style="margin-top: 100rpx">
          <m-empty></m-empty>
        </view>
      </view>
    </m-container>

    <m-tabbar path="pages/agenda/index"></m-tabbar>
  </view>
</template>

<script>
import GlTopMixin from "@/mixins/global-top";
import PanelProcess from "./components/process.vue";
import { getForumListApi, getForumTimeListApi, getforumTypeListApi } from "@/api/modules/homepage.js";
// import PaginationMixin from "@/mixins/pagination.js";
import dayjs from "dayjs";

export default {
  mixins: [GlTopMixin],
  components: { PanelProcess },
  data() {
    return {
      tabIndex: 0,
      tabs: [
        {
          name: "全部",
          value: "",
        },
      ],
      activeTime: 0,
      dateList: [],
      mettingId: "", // 接口返回的会议id
      list: [],
    };
  },

  computed: {
    getWidth() {
      const count = this.dateList.length;
      const base = 670; // 单位rpx
      if (count <= 0) return 0;
      return uni.upx2px(base / (count < 5 ? count : 4));
    },
  },

  async onLoad() {
    uni.showLoading({
      title: "加载中",
    });
    this.getForumDict();
    try {
      const res = await getForumTimeListApi();
      this.dateList = res.dateList || [];
      this.mettingId = res.meeting_id;
      if (this.dateList.length > 0) {
        this.getForumList();
      }
    } catch (error) {}
    uni.hideLoading();
  },

  methods: {
    // 获取论坛列表枚举
    async getForumDict() {
      const dicts = await getforumTypeListApi();
      this.tabs.push(...dicts.map((v) => ({ name: v.twName, value: v.twId })));
    },
    timeFilter(tm) {
      if (!tm) return "";
      return dayjs(tm).format("MM.DD");
    },
    //
    async getForumList() {
      const item = this.dateList[this.activeTime];
      const type = (this.tabs[this.tabIndex] || {}).value || "";
      uni.showLoading({
        title: "加载中...",
      });
      try {
        const response = await getForumListApi({
          tmf_meeting_id: this.mettingId,
          tmf_type: type,
          date: item,
        });
        this.list = response;
      } catch (error) {}
      uni.hideLoading();
    },

    tabChangeHandler(e) {
      this.tabIndex = e.index;
      this.getForumList();
    },

    switchChangeHandler(index) {
      this.activeTime = index;
      this.getForumList();
    },

    reserveHandler(item) {
      const { row, index } = item;
      this.list.splice(index, 1, row);
    },
  },
};
</script>

<style lang="scss" scoped>
.d-switch {
  background: #ffffff;
  border-radius: 100rpx;
  height: 80rpx;
  margin-bottom: 30rpx;
  width: 100%;
  // padding: 0 20rpx 0 0;

  &-box {
    width: fit-content;
  }

  .switch-item {
    // min-width: 166rpx;
    text-align: center;
    line-height: 80rpx;
  }

  .active {
    background: linear-gradient(135deg, #7b4af0 0%, #261ab0 100%);
    color: white;
    border-radius: 100rpx;
  }
}
</style>
